<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <h2>我校地址：{{address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">加性别</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2>学生年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>宠物狗：{{student.dog.name}},{{student.dog.age}}岁</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in student.hoppy" :key="index">{{h}}</li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
        </ul>


    </div>
    <script>
        // let arr=['抽烟','喝酒','烫头']
        Vue.config.productionTip=false;
        const vm = new Vue({ 
            el: '#root',
            data: {
                name:'黑马程序员',
                address:'杭州下沙校区',
                student:{
                    name:'Tom',
                    age:'18',
                    dog:{
                        name:'xixi',
                        age:'4',
                    },
                    // hoppy:arr,
                    hoppy:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'Cun',age:'18'},
                        {name:'Xia',age:'16'},
                        {name:'Qiu',age:'20'},
                        {name:'Dong',age:'19'},
                    ],
                },
            },
            methods: {
                addSex(){
                    // this.$set(this.student,'sex','男')
                    Vue.set(this.student,'sex',"女")//只能根（vm.data）里的某个对象加
                }
            },
            
        })
        vm.student.hoppy.push('学习')
        const a=vm.student.hoppy.push===Array.prototype.push 
        console.log(a);
    </script>
</body>
</html>